<template>
    <div>
        <div class="border-b border-solid border-b-br-light">
            <el-form-item label="套餐名称" prop="name">
                <div class="w-80">
                    <el-input
                        type="text"
                        v-model="formData.name"
                        placeholder="请输入套餐名称"
                    />
                </div>
            </el-form-item>
            <el-form-item label="套餐描述" prop="description">
                <div class="w-80">
                    <el-input
                        type="text"
                        v-model="formData.description"
                        placeholder="请输入套餐描述"
                    />
                </div>
            </el-form-item>
            <el-form-item label="套餐权重" prop="sort">
                <div class="w-80">
                    <el-input-number
                        v-model="formData.sort"
                        :disabled="!!formData.is_builtin"
                        :min="0"
                        :max="999999"
                    />
                </div>
            </el-form-item>
            <el-form-item label="是否上架">
                <el-radio-group v-model="formData.is_disable" :disabled="!!formData.is_builtin">
                    <el-radio :value="0">正常</el-radio>
                    <el-radio :value="1">禁用</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="MCP数" prop="mcp_num">
                <div class="w-80">
                    <el-input
                        v-model="formData.mcp_num"
                        type="number"
                        :min="0"
                        :max="99999999"
                        clearable
                        placeholder="0"
                    >
                        <template #append>个</template>
                    </el-input>
                </div>
            </el-form-item>
            <el-form-item label="智能体数" prop="robot_num">
                <div class="w-80">
                    <el-input
                        v-model="formData.robot_num"
                        type="number"
                        :min="0"
                        :max="99999999"
                        clearable
                        placeholder="0"
                    >
                        <template #append>个</template>
                    </el-input>
                </div>
            </el-form-item>
            <el-form-item label="知识库数" prop="know_num">
                <div class="w-80">
                    <el-input
                        v-model="formData.know_num"
                        type="number"
                        :min="0"
                        :max="99999999"
                        clearable
                        placeholder="0"
                    >
                        <template #append>个</template>
                    </el-input>
                </div>
            </el-form-item>
            <el-form-item label="训练组数" prop="train_num">
                <div class="w-80">
                    <el-input
                        v-model="formData.train_num"
                        type="number"
                        :min="0"
                        :max="99999999"
                        clearable
                        placeholder="0"
                    >
                        <template #append>条</template>
                    </el-input>
                </div>
            </el-form-item>
        </div>

        <div class="mt-6">
            <div class="font-medium text-xl mb-2.5">
                <el-button
                    type="primary"
                    :icon="Plus"
                    :disabled="!!formData.is_builtin"
                    @click="pricingCreate"
                >添加定价</el-button>
                <span v-if="formData.is_builtin" class="form-tips font-normal ml-2">
                    当前为系统内置套餐,不允许随意添加定价,且部份操作被禁止。
                </span>
                <span v-else class="form-tips font-normal ml-2">
                    建议您每个时间类型最多定义1个定义时间不要重复
                </span>
            </div>
            <el-table ref="memberTableRef" row-key="duration" :data="formData.pricing_list">
                <el-table-column width="40">
                    <template #default>
                        <div class="move-icon cursor-move">
                            <Icon name="el-icon-Rank" />
                        </div>
                    </template>
                </el-table-column>
                <el-table-column label="订阅时长" prop="duration" min-width="90">
                    <template #default="{ row }">
                        <el-tag type="primary">
                            {{ durationMap[row?.calendar] ? row?.duration + durationMap[row?.calendar] : '永久' }}
                        </el-tag>
                    </template>
                </el-table-column>
                <el-table-column label="销售价格" prop="sell_price" min-width="100">
                    <template #default="{ row }">
                        ￥{{ row?.sell_price }}
                    </template>
                </el-table-column>
                <el-table-column label="划线价格" prop="line_price" min-width="100">
                    <template #default="{ row }">
                        ￥{{ row?.line_price }}
                    </template>
                </el-table-column>
                <el-table-column label="赠送积分" prop="give_points" min-width="100" />
                <el-table-column label="购买人数" prop="buy_num" min-width="90">
                    <template #default="{ row }">
                        {{ row?.buy_num || '-' }}
                    </template>
                </el-table-column>
                <el-table-column label="定价标签" prop="tags" min-width="100">
                    <template #default="{ row }">
                        {{ row?.tags || '-' }}
                    </template>
                </el-table-column>
                <el-table-column label="是否上架" min-width="100">
                    <template #default="{ row }">
                        <el-switch
                            v-model="row.is_disable"
                            :disabled="!!formData.is_builtin"
                            :active-value="0"
                            :inactive-value="1"
                        />
                    </template>
                </el-table-column>
                <el-table-column label="操作" min-width="120" fixed="right">
                    <template #default="{ row, $index }">
                        <el-button type="primary" link @click="pricingUpdate(row, $index)">编辑</el-button>
                        <el-button
                            v-if="!formData.is_builtin"
                            type="danger"
                            link
                            @click="pricingDelete($index)"
                        >删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>

        <!-- 编辑器 -->
        <popup-pricing
            v-if="pricingPopShow"
            ref="pricingPopRef"
            @success="pricingHandle"
            @close="pricingPopShow = false"
        />
    </div>
</template>

<script setup lang="ts">
import { useVModel } from '@vueuse/core'
import { Plus } from '@element-plus/icons-vue'
import PopupPricing from '../_popup/popup_pricing.vue'

const props = defineProps<{
    modelValue: Record<string, any>
}>()

const emits = defineEmits<{
    (event: 'update:modelValue', value: Record<string, any>): void
}>()

const formData = useVModel(props, 'modelValue', emits)

// 定价弹窗
const pricingPopShow = ref<boolean>(false)
const pricingPopNum = ref<number>(-1)
const pricingPopRef = shallowRef<InstanceType<typeof PopupPricing>>()
const durationMap: any = { 'day': '天', 'month': '月', 'year': '年'}

/**
 * 定价创建
 */
const pricingCreate = async () => {
    pricingPopShow.value = true
    await nextTick()
    pricingPopRef.value?.open('add')
}

/**
 * 定价更新
 */
const pricingUpdate = async (row: any, index: number) => {
    pricingPopShow.value = true
    pricingPopNum.value = index
    await nextTick()
    pricingPopRef.value?.open('edit', row)
}

/**
 * 定价删除
 */
const pricingDelete = async (index: number) => {
    formData.value.pricing_list.splice(index, 1)
}

/**
 * 定价处理
 *
 * @param param0
 */
const pricingHandle = ({type, row}: {type: string, row: any}) => {
    if (type === 'add') {
        formData.value.pricing_list.push(row)
    } else {
        const index: number = pricingPopNum.value
        formData.value.pricing_list[index] = row
    }
}
</script>
